<!DOCTYPE html>
<html>
<head>
    <title>NodeJS Sample Project</title>
    <base href="/">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- common css files -->
    <!--<link rel="stylesheet" href="./libs/bootstrap@3.3.7/css/bootstrap.css">-->
     <link rel="stylesheet" href="./libs/bootstrap@3.3.7/css/bootstrap.min.css">
    <!--<script src="./libs/bootstrapValidator@0.5.4/css/bootstrapValidator.css"></script>-->
    <script src="./libs/bootstrapValidator@0.5.4/css/bootstrapValidator.min.css"></script>

    <!-- css files -->
    <link rel="stylesheet" href="style/style.css"/>
</head>

<body ng-app="myApp" ng-controller="MainCtrl">
    <div>
        <button ng-click="onClickAdd()">Add</button>
        <span><i ng-class="{'glyphicon glyphicon-plus': !isShowAddContent, 'glyphicon glyphicon-minus': isShowAddContent}"></i></span>
    </div>

    <div class="container" ng-show="isShowAddContent">
        <div class="well form-horizontal" id="id_add_info">
            <fieldset>
                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label">EID</label>
                    <div class="col-md-4">
                      <div class="input-group">
                          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                          <input  name="eid" placeholder="EID" class="form-control" type="text" ng-model="eidModel">
                      </div>
                    </div>
                    <a class="input-group-addon generate-btn cursor-pointer" ng-click="generateEID()">Generate</a>
                </div>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label">Name</label>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                            <input name="name" placeholder="Name" class="form-control" type="text" ng-model="nameModel">
                        </div>
                    </div>
                </div>

                <!-- Select Basic -->
                <div class="form-group">
                    <label class="col-md-4 control-label">Gender</label>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
                            <select name="gender" class="form-control selectpicker" ng-model="genderModel">
                                <option>male</option>
                                <option>female</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label">Age</label>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                            <input name="age" placeholder="Age" class="form-control" type="text" ng-model="ageModel">
                        </div>
                    </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label">E-Mail</label>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                            <input name="email" placeholder="E-Mail Address" class="form-control" type="text" ng-model="emailModel">
                        </div>
                    </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label">Phone #</label>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                            <input name="phone" placeholder="0411-86888888" class="form-control" type="text" ng-model="phoneModel">
                        </div>
                    </div>
                </div>

                <!-- Text input-->
                <div class="form-group">
                    <label class="col-md-4 control-label">Address</label>
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                            <input name="address" placeholder="Address" class="form-control" type="text" ng-model="addressModel">
                        </div>
                    </div>
                </div>

                <!-- Success message -->
                <!--<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>-->

                <!-- Button -->
                <div class="form-group">
                    <label class="col-md-4 control-label"></label>
                    <div class="col-md-4" style="text-align: center;">
                        <button type="submit" class="btn btn-warning" ng-click="onClickAddSubmit()">Send<span class="glyphicon glyphicon-send"></span></button>
                    </div>
                </div>
            </fieldset>
        </div>
    </div><!-- /.container -->

    <div class="table-responsive info-table">
        <table class="table table-bordered">
            <tr>
                <td>EID</td>
                <td>Name</td>
                <td>Gender</td>
                <td>Age</td>
                <td>Email</td>
                <td>Phone</td>
                <td>Address</td>
                <td colspan="2">Operation</td>
                <!-- <td></td> -->
            </tr>
            <tr ng-repeat="item in allUserList">
                <td>{{item.eid}}</td>
                <td>{{item.name}}</td>
                <td>{{item.gender}}</td>
                <td>{{item.age}}</td>
                <td>{{item.email}}</td>
                <td>{{item.phone}}</td>
                <td>{{item.address}}</td>
                <td><a ng-click="onClickEdit(item)" data-toggle="modal" data-target="#exampleModal" class="cursor-pointer">Edit</a></td>
                <td><a ng-click="onClickDelete(item)" class="cursor-pointer">Delete</a></td>
            </tr>
        </table>
    </div>

    <!-- edit popup modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">Edit</h4>
          </div>
          <div class="modal-body">
              <div class="well form-horizontal" id="id_edit_info">
                  <fieldset>
                      <!-- Text input-->
                      <div class="form-group">
                          <label class="col-md-4 control-label">EID</label>
                          <div class="col-md-6">
                              <div class="input-group">
                                  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                  <input disabled name="eid" placeholder="EID" class="form-control" type="text" ng-model="eidModel">
                              </div>
                          </div>
                      </div>

                      <!-- Text input-->
                      <div class="form-group">
                          <label class="col-md-4 control-label">Name</label>
                          <div class="col-md-6">
                              <div class="input-group">
                                  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                  <input name="name" placeholder="Name" class="form-control" type="text" ng-model="nameModel">
                              </div>
                          </div>
                      </div>

                      <!-- Select Basic -->
                      <div class="form-group">
                          <label class="col-md-4 control-label">Gender</label>
                          <div class="col-md-6">
                              <div class="input-group">
                                  <span class="input-group-addon"><i class="glyphicon glyphicon-list"></i></span>
                                  <select name="state" class="form-control selectpicker" ng-model="genderModel">
                                      <option>male</option>
                                      <option>female</option>
                                  </select>
                              </div>
                          </div>
                      </div>

                      <!-- Text input-->
                      <div class="form-group">
                          <label class="col-md-4 control-label">Age</label>
                          <div class="col-md-6">
                              <div class="input-group">
                                  <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                                  <input name="age" placeholder="Age" class="form-control" type="text" ng-model="ageModel">
                              </div>
                          </div>
                      </div>

                      <!-- Text input-->
                      <div class="form-group">
                          <label class="col-md-4 control-label">E-Mail</label>
                          <div class="col-md-6">
                              <div class="input-group">
                                  <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                                  <input name="email" placeholder="E-Mail Address" class="form-control" type="text" ng-model="emailModel">
                              </div>
                          </div>
                      </div>

                      <!-- Text input-->
                      <div class="form-group">
                          <label class="col-md-4 control-label">Phone #</label>
                          <div class="col-md-6">
                              <div class="input-group">
                                  <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
                                  <input name="phone" placeholder="0411-86888888" class="form-control" type="text" ng-model="phoneModel">
                              </div>
                          </div>
                      </div>

                      <!-- Text input-->
                      <div class="form-group">
                          <label class="col-md-4 control-label">Address</label>
                          <div class="col-md-6">
                              <div class="input-group">
                                  <span class="input-group-addon"><i class="glyphicon glyphicon-home"></i></span>
                                  <input name="address" placeholder="Address" class="form-control" type="text" ng-model="addressModel">
                              </div>
                          </div>
                      </div>

                      <!-- Success message -->
                      <!--<div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>-->

                      <!-- Button -->
                      <div class="form-group">
                          <label class="col-md-4 control-label"></label>
                          <div class="col-md-4" style="text-align: center;">
                              <button type="submit" class="btn btn-warning" data-dismiss="modal" ng-click="onClickEditSubmit()">Send<span class="glyphicon glyphicon-send"></span></button>
                          </div>
                      </div>
                  </fieldset>
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="onClickEditCancel()">Cancel</button>
            <!--<button type="button" class="btn btn-primary" data-dismiss="modal" ng-click="onClickEditSubmit()">Submit</button>-->
          </div>
        </div>
      </div>
    </div>
</body>

<!-- common js files -->
<!--<script src="./libs/jquery@3.2.1/jquery.js"></script>-->
 <script src="./libs/jquery@3.2.1/jquery.min.js"></script>
<!--<script src="./libs/angular@1.3.6/angular.js"></script>-->
 <script src="./libs/angular@1.3.6/angular.min.js"></script>
<!--<script src="./libs/bootstrap@3.3.7/js/bootstrap.js"></script>-->
 <script src="./libs/bootstrap@3.3.7/js/bootstrap.min.js"></script>
<!--<script src="./libs/bootstrapValidator@0.5.4/js/bootstrapValidator.js"></script>-->
 <script src="./libs/bootstrapValidator@0.5.4/js/bootstrapValidator.min.js"></script>

<!-- js files -->
<!-- <script src="js/javascript.js"></script> -->
<script src="js/javascript-angular.js"></script>

</html>
